<template>
<!-- 发票列表 -->
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>

      <!-- 支付状态：NavMenu导航菜单 -->
      <!-- <div class="paystatus">
        <div class="nav">
          <span class="text1">支付状态：</span>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">全部</el-menu-item>
            <el-menu-item index="2">已支付</el-menu-item>
            <el-menu-item index="3">待支付</el-menu-item>
          </el-menu>
        </div>
        <div class="line"></div>
      </div> -->
      <!-- 支付状态：NavMenu导航菜单 -->

      <div class="flex">
        <div class="left flex">
          <!-- 搜索框 -->
          <el-form inline class="search">
              <el-form-item>
                <div style="display:flex; justify-content:space-between;">
                  <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入客户名称">
                  </el-input>
                  <el-button :loading="loading" type="primary" style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);border-radius: 3px;"
                    @click="getTableList" icon="el-icon-search">
                    搜索</el-button>
                </div>
              </el-form-item>
            </el-form>
          <!-- 搜索框 -->
          <!-- 日期选择器 -->
          <div class="block">
            <el-date-picker
              v-model="value"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <!-- 日期选择器 -->
        </div>
        <div class="right">
          <!-- excel导出按钮 -->
          <el-button type="warning">导出</el-button>
          <!-- excel导出按钮 -->
        </div>
      </div>

      <!-- 表格 -->
      <el-table ref="tableData" v-loading="loading" :data="listData.list" highlight-current-row
        :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
        :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }">
        <el-table-column align="center" label="下单时间" prop="time" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="客户名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="发票类型" prop="tilltype" show-overflow-tooltip ></el-table-column>
        <el-table-column align="center" label="抬头类型" prop="headtype" show-overflow-tooltip ></el-table-column>
        <el-table-column align="center" label="发票抬头" prop="tillhead" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="开票金额" prop="cost" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="开票状态" prop="status" min-width="130" >
          <!-- <template slot-scope="scope">
            <el-button size="small" type="text" @click="getTableList()">查看明细</el-button>
          </template> -->
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 分页 -->
      <el-pagination :current-page="listPram.page" :page-sizes="constants.page.limit" :layout="constants.page.layout"
        :total="listData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <!-- 分页 -->
    </el-card>
  </div>
<!-- 发票列表 -->
</template>

<script>
import * as roleApi from '@/api/role.js'
export default {
  name: "Reconciliation",
  data() {
    return {
      // data：日期选择器
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value: '',
      // data：日期选择器
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      listData: { 
        list: [
          { 
            time:'',
            name:'',
            tilltype:'',
            headtype:'',
            tillhead:'',
            cost:'',
            status: '' 
          }
        ] 
      },
      // 表单数据
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      //多选
      menuList: [],
      loading: false,
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    }
  }
}
</script>

<style lang="scss" scoped>
.line{
  margin-bottom: 8px;
}
.paystatus{
  margin-right: 17px;
}
.flex{
  display: flex;
  justify-content: space-between;
  .left{
    .block{
      margin-left: 2.5rem;
    }
  }
}
</style>
